<template>
    <div class="panel-box">
        <Header />
        <!-- 动态组件 -->
        <component :is="isPanel" />
    </div>
</template>
<script>
import Header from "./comm/header.vue";
import TreeRight from "./treeRight.vue";
import NormalRight from "./normalRight.vue";
import GridRight from "./gridRight.vue";
export default {
    components: {
        Header,
        TreeRight,
        NormalRight,
        GridRight,
    },
    data() {
        return {
            MenuName: "",
            MenuType: "",
            isPanel: "TreeRight",
            panelList: [
                {
                    id: 1,
                    name: "TreeRight",
                },
                {
                    id: 2,
                    name: "NormalRight",
                },
                {
                    id: 3,
                    name: "GridRight",
                },
            ],
        };
    },
    created() {
        // 切换菜单
        this.$bus.$on("meunId", (val) => {
            // console.log("val===",val);
            this.panelList.find((item) => {
                if (item.id == val.id) {
                    this.isPanel = item.name;
                }
            });
            this.MenuName = val.name;
            this.MenuType = val.type;
        });
    },
};
</script>
<style lang="scss" scoped>
.panel-box {
    height: calc(100vh - 72px);
    width: 340px;
    // background-color: #202735;
    background-color: var(--bgc);
    box-sizing: border-box;
    margin-left: 4px;
    position: absolute;
    top: 68px;
    right: 5px;
}
</style>
